import React, {useEffect} from 'react';
import {Modal, Form, Input, Button, Space, message} from "antd";
import {useAppDispatch} from "@/hooks";
import {postHospitalSetSaveAsync} from "@/store/slices/hosp";

function SetModal(props:any) {
    const [form] = Form.useForm();
    const dispatch = useAppDispatch();
    useEffect(()=>{
        if(props.info){
            console.log(1111);
            form.setFieldsValue(props.info);
        }

    },[props.info]);
    console.log(props.info);
    return (
        <Modal title={props.modalTitle}
               open={props.isModalOpen}
               footer={null}
               // 点击蒙层是否允许关闭
               maskClosable={false}
               // onOk={handleOk}
               onCancel={()=>{
                    form.resetFields();// 清空表单
                   props.setIsModalOpen(false);
               }}
        >
            <Form
                form={form}
                name="basic"
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 19 }}
                // initialValues={props.info}
                onFinish={async (values)=>{
                    const result = await dispatch(postHospitalSetSaveAsync(values));
                    console.log(result);
                    if(values.id){
                        message.success("修改成功");
                    }else{
                        message.success("添加"+values.hosname+"成功")
                    }

                    form.resetFields();// 清空表单
                    props.setIsModalOpen(false);
                }}
                autoComplete="off"
            >

                <Form.Item
                    hidden={true}
                    name="id">
                    <Input />
                </Form.Item>

                <Form.Item
                    label="医院名称"
                    name="hosname"
                    rules={[{
                        required: true,
                        min:2,
                        max:16,
                        message: '请输入医院名称' }
                    ]}
                >
                    <Input />
                </Form.Item>


                <Form.Item
                    label="医院编号"
                    name="hoscode"
                    rules={[{ required: true, message: '请输入医院编码' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="api基础地址"
                    name="apiUrl"
                    rules={[{
                        required: true,
                        pattern:/^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i,
                        message: '请输入正确的api基础地址'
                    }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="联系人姓名"
                    name="contactsName"
                    rules={[{ required: true, message: '请输入联系人姓名' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="联系人手机"
                    name="contactsPhone"

                    rules={[{ required: true,
                        pattern:/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
                        message: '请输入正确 的联系人手机' }]}
                >
                    <Input />
                </Form.Item>




                <Form.Item wrapperCol={{ offset: 5, span: 19 }}>
                    <Space>
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                        <Button onClick={()=>{
                            form.resetFields();
                        }} htmlType="button">
                            清空
                        </Button>
                    </Space>
                </Form.Item>
            </Form>
        </Modal>
    );
}

export default SetModal;